<template>
  <div class="advertising">
    <div class="header-warpper" @click="$router.back(-1)">
      <img src="../../assets/l_jt.png" alt />
      <span>我的广告</span>
    </div>
    <p v-if="order.length==0" class="nocenten nocentop">
      <img src="../../assets/g123.png" alt />
    </p>
    <p class="nocenten" v-if="order.length==0">暂无数据</p>

    <div class="wt_block" v-for="(item,index) in order" :key="index">
      <div class="head">
        <div class="head_left">
          <span class="nsb1 nsb2" v-if="item.type==1">买入</span>
          <span class="nsb1" v-else>卖出</span>
          <span class="ns2">{{item.ftypename}}</span>&nbsp;
          <span class="ns3">{{item.addtime}}</span>&nbsp;
        </div>
        <div class="head_right">
          <span v-if="item.status==2">未付款</span>
          <span v-else-if="item.status==3">已付款</span>
          <span v-else-if="item.status==4">已完成</span>
          <span v-else-if="item.status==1">挂单中</span>
          <span v-else-if="item.status==5">已取消</span>
          <img src="../../assets/r_jt.png" alt />
        </div>
      </div>
      <div class="content1">
        <div class="ns1">
          <p class="ws1">交易单价</p>
          <p class="ws2">{{item.price}}</p>
        </div>
        <div class="ns3">
          <p class="ws1">剩余数量</p>
          <p class="ws2">{{item.num}}</p>
        </div>
      </div>
      <div class="content2">
        <div class="ns1">
          <p class="ws1">订单编号</p>
          <p class="ws2">{{item.ordersn}}</p>
        </div>
        <div class="ns3">
          <p class="ws1">全部数量</p>
          <p class="ws2">{{item.allnum}}</p>
        </div>
      </div>      
      <cube-button @click="revocation(item.id)">撤销</cube-button>
    </div>
  </div>
</template>
<script>
import { setTimeout } from 'timers';
export default {
  created(){
    this.startrequ();
  },
  data() {
    return {
      order:[],
      page:1
    };
  },
  methods:{
    startrequ(){
      this.$axios.post('/index/otcexchange/mypushorder',{
          page:this.page,
          limit:10
        })
        .then(req=>{          
          if(req.data.info){
            this.order=req.data.info
          }else{
            setTimeout(()=>{
              this.order=[]
            },1200)
          }          
        })
    },
    revocation(orderid){
      this.$axios.post('/index/otcexchange/repealsmyorder',{
          orderid:orderid
        })
        .then(res=>{          
          this.$createToast({ txt: res.data.msg, type: "txt" ,time:1200}).show();      
          if(res.data.code==0){
            this.page=1;
            this.startrequ();            
          }          
        })
    }
  }
};
</script>

<style lang="less" scoped>
.cube-btn{
  width: 2rem;
    height: 1rem;
    line-height: 1rem;
    padding: 0;
    position: relative;
    left: 80%;
}
.advertising {
  padding: 0 0.4rem;
}
.header-warpper {
  padding-left: 0;
  height: 1.333333rem;
  position: relative;
  color: #000;  
  img {
    width: 0.213333rem;
    height: 0.373333rem;
  }
  span {
    font-size: 0.48rem;
    padding-left: 0.2rem;
  }
}
.nocenten {
  text-align: center;
  font-size: 0.4rem;
  img {
    width: 60%;
  }
}
 .f-flex{
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }
.wt_block {
  padding: 0.533333rem 0.4rem;
  border-bottom: 1px solid #f1f1f1;
  .head {
    .f-flex();
    justify-content: space-between;
    .head_left {
      .nsb1 {
        color: #e56337;
        font-size: 0.453333rem;
        font-weight: bold;
        padding-right: 0.1rem;
      }
      .nsb2 {
        color: #00bd84;
        font-size: 0.453333rem;
        font-weight: bold;
      }
      .ns2 {
        color: #000;
        font-size: 0.453333rem;
        font-weight: bold;
      }
      .ns3 {
        color: #a1a7b7;
        font-size: 0.32rem;
      }
      .ns4 {
        color: #a1a7b7;
        font-size: 0.32rem;
      }
    }
    .head_right {
      .f-flex();
      span {
        color: #a1a7b7;
        font-size: 0.373333rem;
        font-weight: bold;
        padding-right: 0.266667rem;
      }
      img {
        width: 0.2rem;
        height: 0.3rem;
      }
    }
  }
  .content1 > .ns1 {
    width: 35%;
  }
  .content1 > .ns2 {
    width: 30%;
  }
  .content1 > .ns3 {
    width: 35%;
  }
  .content1 > .ns3 > .ws1 {
    text-align: right;
  }
  .content2 > .ns1 {
    width: 35%;
  }
  .content2 > .ns2 {
    width: 30%;
  }
  .content2 > .ns3 {
    width: 35%;
  }
  .content2 > .ns3 > .ws1 {
    text-align: right;
  }
  .content1 {
    margin-top: 0.533333rem;
    .f-flex();
    justify-content: space-between;
    .ns1 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns2 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns3 {
      text-align: right;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
        text-align: right;
      }
    }
  }
  .content2 {
    .f-flex();
    margin-top: 0.273333rem;
    justify-content: space-between;
    .ns1 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns2 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns3 {
      text-align: right;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
        text-align: right;
      }
    }
  }
}
.nocentop{
  margin-top: 1rem;
}
</style>
